<template>
	<view :class="{ white: !colorStyle, black: colorStyle }" @touchmove="handletouchmove" @touchstart="handletouchstart"
		@touchend="handletouchend">
		<view :class="lang">
			<u-navbar :is-back="true" :is-fixed="true" :title="$t('indexs.背题模式')" back-icon-name="arrow-leftward"
				:background="background" :title-color="titlecolor" :back-icon-color="titlecolor"
				:custom-back="handleback">

				<view class="slot-wrap">
					<view class="navbar-right">
						<view class="message-box right-item" @click="settings()">
							<image class="settingimg"
								v-bind:src="colorStyle == true ? '/static/icon/settinga.png' : '/static/icon/setting.png'">
							</image>
						</view>
					</view>
				</view>
			</u-navbar>



			<scroll-view class="scroll-Ys" scroll-y="true">
				<view class="mheight">
					<view class="topic" :class="lang + 'layout'">
						<view class="topiccon" v-bind:style="{ fontSize: fontSize + 'rpx' }">
							<view class="topiccon-box" :class="{ bgback: colorStyle == true }">
								<view class="topicnum-clear">
									<view class="topicnum">
										<text
											class="topicnum-blue">{{ viewsindex + 1 }}/</text><text>{{ subarrid.length }}</text>
									</view>
									<view class="clear" @click="clearindex()">
										{{ $t("parctices.清理记录") }}
									</view>
								</view>

								<view v-if="lang == 'cn'" class="question-class">
									<text class="question-class-text" v-if="subarr.ttype == 0">{{ $t("keeping.判断") }}
									</text>
									<text class="question-class-text" v-if="subarr.ttype == 1">{{ $t("keeping.单选") }}
									</text>
									<text class="question-class-text" v-if="subarr.ttype == 2">{{ $t("keeping.多选") }}
									</text>
									<text class="" style="line-height: 55rpx; margin-left: 20rpx">
										{{ subarr.question == undefined ? "" : subarr.question }}
										<text class="viewid">ID:{{ subarr.tid }}/{{subarr.year}}</text>
									</text>
								</view>
								<view v-else class="question-class">
									<text class="ku-question-class-text" v-if="subarr.ttype == 0">{{ $t("keeping.判断") }}
									</text>
									<text class="ku-question-class-text" v-if="subarr.ttype == 1">{{ $t("keeping.单选") }}
									</text>
									<text class="ku-question-class-text" v-if="subarr.ttype == 2">{{ $t("keeping.多选") }}
									</text>
									<text class="" style="line-height: 55rpx; margin-left: 20rpx">
										{{ subarr.question == undefined ? "" : subarr.question }}<text class="viewid"
											style="margin-right: 20rpx">ID:{{ subarr.tid }}/{{subarr.year}}</text>
									</text>
								</view>

								<view class="timg" v-if="subarr.timg !== '' " @click="handleImgBig(tiimg)">
									<image :src="tiimg" mode="aspectFit" @error="onimgerr()"></image>
								</view>

								<view class="answer-box" style="margin-top: 41rpx">
									<view v-if="subarr.ttype == 0">

										<view class="answers" :class="subarr.truefalse === 1 ? 'anschackp' : 'hate'">
											<view class="answerselect">
												<view class="answerabcd"
													v-bind:style="{ width: fontSize + 20 + 'rpx', height: fontSize + 20 + 'rpx', lineHeight: lang == 'cn' ? '50rpx' : '62rpx'  }">
													<text v-if="subarr.truefalse === 1">A</text>
													<!-- <u-icon v-if="subarr.truefalse === 1" name="checkmark"></u-icon> -->
													<u-icon color="#4e4e4e" v-if="subarr.truefalse === 0" name="close">
													</u-icon>
												</view>
											</view>
											<view class="answerstext">
												<text>{{ $t('keeping.对') }}</text>
											</view>
										</view>

										<view class="answers" :class="subarr.truefalse === 0 ? 'anschackp' : 'hate'">
											<view class="answerselect">
												<view class="answerabcd"
													v-bind:style="{ width: fontSize + 20 + 'rpx', height: fontSize + 20 + 'rpx',lineHeight: lang == 'cn' ? '50rpx' : '62rpx'  }">
													<text v-if="subarr.truefalse === 0">B</text>

													<!-- <u-icon v-if="subarr.truefalse === 0" name="close"></u-icon> -->
													<u-icon color="#4e4e4e" v-if="subarr.truefalse === 1" name="close"
														style="top: 2rpx;"></u-icon>
												</view>
											</view>
											<view class="answerstext">
												<text>{{ $t('keeping.错') }}</text>
											</view>
										</view>
									</view>


									<view class="answer" v-if="subarr.ttype == 1">
										<view>
											<view class="answers"
												:class="subarr.answer.indexOf('A') == 0 ? 'anschack' : ''">
												<view class="answerselect">
													<view class="answerabcd"
														v-bind:style="{ width: fontSize + 20 + 'rpx', height: fontSize + 20 + 'rpx', lineHeight:  lang == 'cn' ? '50rpx' : '60rpx'  }">
														<text v-if="subarr.answer.indexOf('A') !== 0">A</text>
														<u-icon v-if="subarr.answer.indexOf('A') == 0"
															name="checkmark"></u-icon>
													</view>
												</view>
												<view class="answerstext">
													<text>{{ subarr.option1 }}</text>
												</view>
											</view>

											<view class="answers"
												:class="subarr.answer.indexOf('B') == 0 ? 'anschack' : ''">
												<view class="answerselect">
													<view class="answerabcd"
														v-bind:style="{ width: fontSize + 20 + 'rpx', height: fontSize + 20 + 'rpx', lineHeight:  lang == 'cn' ? '50rpx' : '66rpx'  }">
														<text v-if="subarr.answer.indexOf('B') !== 0">B</text>
														<u-icon v-if="subarr.answer.indexOf('B') == 0"
															name="checkmark"></u-icon>
													</view>
												</view>
												<view class="answerstext">
													<text>{{ subarr.option2 }}</text>
												</view>
											</view>
											<view class="answers"
												:class="subarr.answer.indexOf('C') == 0 ? 'anschack' : ''">
												<view class="answerselect">
													<view class="answerabcd"
														v-bind:style="{ width: fontSize + 20 + 'rpx', height: fontSize + 20 + 'rpx', lineHeight:  lang == 'cn' ? '50rpx' : '66rpx'  }">
														<text v-if="subarr.answer.indexOf('C') !== 0">C</text>
														<u-icon v-if="subarr.answer.indexOf('C') == 0"
															name="checkmark"></u-icon>
													</view>
												</view>
												<view class="answerstext">
													<text>{{ subarr.option3 }}</text>
												</view>
											</view>
											<view class="answers"
												:class="subarr.answer.indexOf('D') == 0 ? 'anschack' : ''">
												<view class="answerselect">
													<view class="answerabcd"
														v-bind:style="{ width: fontSize + 20 + 'rpx', height: fontSize + 20 + 'rpx', lineHeight: lang == 'cn' ? '50rpx' : '66rpx'  }">
														<text v-if="subarr.answer.indexOf('D') !== 0">D</text>
														<u-icon v-if="subarr.answer.indexOf('D') == 0"
															name="checkmark"></u-icon>
													</view>
												</view>
												<view class="answerstext">
													<text>{{ subarr.option4 }}</text>
												</view>
											</view>
										</view>
									</view>


									<view class="answer" v-if="subarr.ttype == 2">
										<view>
											<view class="answers"
												:class="subarr.answer.indexOf('A') != -1 ? 'anschack' : ''">
												<view class="answerselect">
													<view class="answerabcd"
														v-bind:style="{ width: fontSize + 20 + 'rpx', height: fontSize + 20 + 'rpx', lineHeight: lang == 'cn' ? '44rpx' : '62rpx' }">
														<text v-if="subarr.answer.indexOf('A') == -1">A</text>
														<u-icon v-if="subarr.answer.indexOf('A') != -1"
															name="checkmark"></u-icon>
													</view>
												</view>
												<view class="answerstext">
													<text>{{ subarr.option1 }}</text>
												</view>
											</view>

											<view class="answers"
												:class="subarr.answer.indexOf('B') != -1 ? 'anschack' : ''">
												<view class="answerselect">
													<view class="answerabcd"
														v-bind:style="{ width: fontSize + 20 + 'rpx', height: fontSize + 20 + 'rpx', lineHeight: lang == 'cn' ? '44rpx' : '66rpx'  }">
														<text v-if="subarr.answer.indexOf('B') == -1">B</text>
														<u-icon v-if="subarr.answer.indexOf('B') != -1"
															name="checkmark"></u-icon>
													</view>
												</view>
												<view class="answerstext">
													<text>{{ subarr.option2 }}</text>
												</view>
											</view>
											<view class="answers"
												:class="subarr.answer.indexOf('C') != -1 ? 'anschack' : ''">
												<view class="answerselect">
													<view class="answerabcd"
														v-bind:style="{ width: fontSize + 20 + 'rpx', height: fontSize + 20 + 'rpx', lineHeight: lang == 'cn' ? '44rpx' : '66rpx'  }">
														<text v-if="subarr.answer.indexOf('C') == -1">C</text>
														<u-icon v-if="subarr.answer.indexOf('C') != -1"
															name="checkmark"></u-icon>
													</view>
												</view>
												<view class="answerstext">
													<text>{{ subarr.option3 }}</text>
												</view>
											</view>
											<view v-if="subarr.option4 != ''" class="answers"
												:class="subarr.answer.indexOf('D') != -1 ? 'anschack' : ''">
												<view class="answerselect">
													<view class="answerabcd"
														v-bind:style="{ width: fontSize + 20 + 'rpx', height: fontSize + 20 + 'rpx',lineHeight: lang == 'cn' ? '44rpx' : '62rpx'  }">
														<text v-if="subarr.answer.indexOf('D') == -1">D</text>
														<u-icon v-if="subarr.answer.indexOf('D') != -1"
															name="checkmark"></u-icon>
													</view>
												</view>
												<view class="answerstext">
													<text>{{ subarr.option4 }}</text>
												</view>
											</view>
										</view>
									</view>



								</view>



								<view class="collect-listen-read" style="font-size: 30rpx;">
									<view class="collect" @click="savestar(viewsindex)">
										<image v-if="!star" class="collect-img"
											src="@/static/images/sc.png">
										</image>
										<image v-else class="collect-img"
											src="@/static/images/sced.png">
										</image>
										<view v-if="!star" class="collect-text">
											<text>{{ $t("keeping.收藏") }}</text>
										</view>
										<view v-else class="collect-text">
											<text>{{ $t("keeping.已收藏") }}</text>
										</view>
									</view>
									<view class="collect" @click.stop="btnBackMusicType('jq',subarr.tid)">
										<image class="collect-img"
											src="@/static/images/tjq.png">
										</image>
										<view class="collect-text">
											<text>{{ $t("keeping.听技巧") }}</text>
										</view>
									</view>
									<view class="collect" @click.stop="btnBackMusicType('yuyin',subarr.tid)">
										<image class="collect-img"
											src="@/static/images/dt.png">
										</image>
										<view class="collect-text">
											<text>{{ $t("keeping.读题") }}</text>
										</view>
									</view>
								</view>


								<view class="answer-correction">
									<view class="answer">
										<text>{{ $t("parctices.答案") }}</text>
										<text v-if="subarr.ttype == 0">
											<text v-if="lang == 'cn'"
												class="answer-blue">{{ subarr.answer == '对' ?  $t("keeping.对") : $t("keeping.错")  }}</text>
											<text v-else class="answer-blue"
												style="margin-right: 17rpx">{{subarr.answer == '对' ?  $t("keeping.对") : $t("keeping.错")  }}</text>
										</text>

										<text v-else>
											<text v-if="lang == 'cn'" class="answer-blue">{{ subarr.answer  }}</text>
											<text v-else class="answer-blue"
												style="margin-right: 17rpx">{{subarr.answer }}</text>

										</text>
									</view>
									<view class="correction" @click="feed()">
										{{ $t("parctices.纠错") }}
									</view>
								</view>

								<view class="Problem-technique" :class="{ bgback: colorStyle == true }"
									v-if="subarr.chapter">
									<view v-if="lang == 'cn'" class="Problem-title">
										<text class="shu"></text>
										<text style="margin-left: 12rpx">{{ $t("parctices.题目技巧") }}</text>
									</view>
									<view v-else class="Problem-title">
										<text class="shu"></text>
										<text style="margin-right: 26rpx">{{ $t("parctices.题目技巧") }}</text>
									</view>
									<view class="technique">
										<!-- <v-html>{{subarr.chapter}}</v-html> -->

										<rich-text type="text" :nodes="subarr.chapter"></rich-text>
									</view>
								</view>


								<view class="Problem-desc Problem-technique" :class="{ bgback: colorStyle == true }"
									v-if="subarr.tdesc">
									<view v-if="lang == 'cn'" class="Problem-title">
										<text class="shu"></text>
										<text style="margin-left: 12rpx">{{ $t("parctices.题目详解") }}</text>
									</view>
									<view v-else class="Problem-title">
										<text class="shu"></text>
										<text style="margin-right: 26rpx">{{ $t("parctices.题目详解") }}</text>
									</view>
									<view class="technique">
										<text>{{ subarr.tdesc }}</text>
									</view>
								</view>
								<view class="Problem-desc Problem-technique" :class="{ bgback: colorStyle == true }"
									v-show="videoVisible">
									<view v-if="lang == 'cn'" class="Problem-title">
										<text class="shu"></text>
										<text style="margin-left: 12rpx">{{ $t("parctices.视频讲解") }}</text>
									</view>
									<view v-else class="Problem-title">
										<text class="shu"></text>
										<text style="margin-right: 26rpx">{{ $t("parctices.视频讲解") }}</text>
									</view>
									<view v-if="videoimgvisible" class="videoimg" @click="handlevideoBox">
										<image lazy-load="true" :src="videoFM"></image>
										<view class="videocount" style="direction: ltr;">
											<u-icon name="play-right" color="#FFFFFF"></u-icon>
										</view>
									</view>
								</view>


							</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<view class="marfoot">
				<view class="markfoot">
					<view class="markfootview pl-15" @click="privet()" style="display: flex; align-items: center;">
						<!-- <u-icon name="arrow-left"></u-icon> -->
						<image class="last-img" style="width: 26rpx; height: 26rpx;"
							src="@/static/images/last.png">
						</image>
						<text style="margin-left: 10rpx;">{{ $t('parctices.上一题') }}</text>
					</view>
					<view class="markfootview grenn" @click="showka()">
						<u-icon top="1" name="checkmark-circle-fill" color="#0DA0FF" size="35"></u-icon>
						<text class="pl-10">{{ datacount }}</text>
					</view>
					<!-- 	<view class="markfootview  csimg" @click="savestar(viewsindex)">
						
						<image class="colles" mode="widthFix"
							:src="star == 1 ? 'https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/used_img/sced.png' :
							 'https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/used_img/sc.png'">
						</image>
					</view> -->
					<view class="markfoot-jiangjie" @click.stop="btnBackMusicType('jieshi',subarr.tid)">
						<image class="jiangjie-img"
							src="@/static/images/jqjj.png">
						</image>
						<view class="jiangjie-text">
							<text>{{$t("keeping.官方解释")}}</text>
						</view>
					</view>
					<view class="markfootview error">
						<u-icon top="1" name="eye-fill" color="#0DA0FF" size="35"></u-icon>
						<text class="pl-10">{{ viewsindex + 1 }}</text>
					</view>
					<view class="markfootview pr-15" @click="nextt()" style="display: flex; align-items: center;">
						<text style="margin-right: 10rpx;">{{ $t('parctices.下一题') }}</text>
						<image class="last-img" style="width: 26rpx; height: 26rpx;"
							src="@/static/images/next.png">
						</image>
					</view>
				</view>
			</view>


			<u-popup class="imgpop" v-model="imgmodalBox" mode="center" width="100%" height="100%">
				<view
					style="height: 100%; display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<image :src="tiimg" mode="widthFix" style="width: 730rpx;"></image>
					<u-icon name="close-circle" color="#999999" size="56" @click="handleCloseimg"
						style="margin-top: 50rpx;"></u-icon>
				</view>
			</u-popup>




			<u-popup v-model="showcart" class="popup" mode="bottom" height="700rpx">
				<view style="height: 100%; background-color: #ffffff;">
					<view class="carttitle">
						<view class="carttitleview">
							<text>{{ $t('parctices.答题卡') }}</text>
						</view>
						<view class="carttitleview">
							<view class="markfootview grenn">
								<u-icon top="1" name="checkmark-circle-fill" color="#0DA0FF" size="35"></u-icon>
								<text class="pl-10 " style="color:#0DA0FF ;">{{ datacount }}</text>
							</view>
							<view class="markfootview pl-20"></view>
							<view class="markfootview error">
								<u-icon top="1" name="eye-fill" color="#0DA0FF" size="35"></u-icon>
								<text class="pl-10 " style="color:#0DA0FF ;">{{ viewsindex + 1 }}</text>
							</view>
						</view>
						<view class="carttitleview">
							<text>{{ viewsindex + 1 }}/{{ subarrid.length }}</text>
						</view>
					</view>
					<view class="cartcon">
						<scroll-view scroll-y="true" class="scroll-Y" show-scrollbar="true">
							<view class="cartconview">
								<view class="cartconnum" v-for="(item, index) in subarrid" :key="index"
									:class="index == viewsindex ? 'cartaction' : ' '" @click="tiao(index)">
									{{ index + 1 }}
								</view>
							</view>
						</scroll-view>
					</view>
				</view>

			</u-popup>

			<u-popup v-model="show" class="popup" border-radius="15" mode="bottom" length="55%" :closeable="closeable"
				:close-icon-pos="closeIconPos">
				<view style="height: 100%; background-color: #ffffff;">
					<view class="poptitle">
						<view class="settingtitle font-35">
							<text>{{ $t("parctices.设置") }}</text>
						</view>
					</view>

					<view class="setting-yx settingcon">
						<view class="setting-yx-text">
							{{ $t("parctices.答题音效提示") }}
						</view>
						<view class="settingswith">
							<u-switch active-color="#0DA0FF" @change="musicbar" size="43" v-model="musicchecked">
							</u-switch>
						</view>
					</view>
					<view class="setting-yx settingcon booter-bottom">
						<view class="setting-yx-text">
							{{ $t("parctices.答题震动提示") }}
						</view>
						<view class="settingswith">
							<u-switch active-color="#0DA0FF" @change="vibrate" size="43" v-model="zhenchecked">
							</u-switch>
						</view>
					</view>
					<view class="setting-yx settingcon booter-bottom">
						<view class="setting-yx-text">
							{{ $t("parctices.答对自动下一题") }}
						</view>
						<view class="settingswith">
							<u-switch active-color="#0DA0FF" @change="marknext" size="43" v-model="nextchecked">
							</u-switch>
						</view>
					</view>
					<view class="setting-yx booter-bottom">
						<view class="setting-fontsize-text">
							{{ $t("parctices.字体大小") }}
						</view>
						<view class="">
							<view class="fontsizeleft font-18">A</view>
							<view class="fontsizebg">
								<slider class="fontslider" min="30" max="40" v-bind:value="fontSize"
									@change="sliderChange" activeColor="#C6C7C6" backgroundColor="#C6C7C6"
									block-size="20" />
							</view>
							<view class="fontsizeleft font-35">A</view>
						</view>
					</view>
					<view class="settingcon">
						<view class="settingfoottext">{{ $t("parctices.皮肤模式") }}</view>
						<view class="buttonsbox">
							<view class="settingfootbu back" style="margin-right: 34rpx; color: #ffffff;"
								@click="colour(0)">
								<view>{{ $t("parctices.夜间模式") }}</view>
								<image v-if="colorStyle" src="../../static/images/selected.png"
									style="width: 24rpx;height: 24rpx;position: absolute;top: -10rpx; right: -10rpx;">
								</image>
							</view>
							<view class="settingfootbu bai" @click="colour(1)">
								<view>{{ $t("parctices.白天模式") }}</view>
								<image v-if="!colorStyle" src="../../static/images/selected.png"
									style="width: 24rpx;height: 24rpx;position: absolute;top: -10rpx; right: -10rpx;">
								</image>
							</view>
						</view>
					</view>
				</view>
			</u-popup>


			<u-popup :custom-style='{background:"transparent"}' class="imgpop" v-model="videoboxviible" mode="center"
				width="100%" height="100%" :mask="false" :duration="0">
				<view
					style="height: 100%; display: flex;flex-direction: column;justify-content: flex-end;align-items: center; ">
					<!-- #ifdef MP-WEIXIN -->
					<view
						style="position: absolute; bottom :300rpx;width: 690rpx; overflow: hidden; border-radius: 40rpx;">
						<video id="myVideo" :src="videoUrl" style="width: 690rpx; height: 388rpx;" objectFit="contain"
							controls="true" @error="handleVideo"></video>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<video style="width: 345px;height: 194px;" id="myVideo" :src="videoUrl" objectFit="contain"
						controls="true" @error="handleVideo"></video>
					<!-- #endif -->

					<view class=""
						style=" margin: 210rpx 0; padding:0 20rpx; height: 80rpx; color: white; background-color: red;border-radius: 50rpx;text-align: center; line-height: 80rpx;"
						@click="handleClosevideo">
						{{ $t("parctices.点击关闭视频") }}
					</view>
				</view>

			</u-popup>


		</view>
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	var onplays = 0;
	//#ifdef APP-PLUS
	import {
		isOpen,
		openDb,
		addTab,
		mergeSql,
		getDataList,
		addTabItem,
		closeSQL,
		deleteInformationType,
		getTable,
		getCount,
		updateSQL,
		isTable,
		selectDataList
	} from '@/js_sdk/lyz-sqlite/index.js';
	import {
		getFileName,
		getimgname
	} from '../../common/imgtool.js';
	//#endif

	import {
		getCarType
	} from '../../common/savetool.js';
	//接口
	import {
		tikuindex_api, //错题收藏列表id
		upurl,
		shoucang_api,
		cuotilist_api,
		alldelshoucang_api,
		yunurl,
		tikutid_api
	} from '@/api/index';

	export default {
		data() {
			return {
				lang: this.$i18n.locale,
				//左右滑动监听
				flag: 0, //1向左滑动,2向右滑动,3向上滑动 4向下滑动
				lastX: 0,
				lastXX: 0,
				rightSlot: true,
				fontSize: 33,
				//设置弹出框
				show: false,
				closeable: true,
				closeIconPos: 'top-right',
				//背景音乐
				musicchecked: false,
				zhenchecked: false, //是否打开震动
				nextchecked: false, //自动跳转下一题
				colorStyle: false, //true:夜间模式，false:日间
				// background: '#ffffff',
				background: {
					backgroundColor: '#ffffff'
				},
				titlecolor: '#ffffff',
				showcart: false, //答题卡弹出框
				langheight: 20,
				muted: true,
				zhtestarr: {
					question: '以下不属于机动车驾驶证审验内容的是什么？',
					option1: '道路交通安全违法行为、交通事故处理情况',
					option2: '记满12分后参加学习和考试情况',
					option3: '驾驶人身体条件',
					option4: '驾驶车辆累计行驶里程',
					answer: 'D',
					explain: '机动车驾驶证审验内容：（一）道路交通安全违法行为、交通事故处理情况；（二）身体条件情况；（三）道路交通安全违法行为记分及记满12分后参加学习和考试情况。对交通违法行为或者交通事故未处理完毕的、身体条件不符合驾驶许可条件的、未按照规定参加学习、教育和考试的，不予通过审验。',
					chapter: "技巧:驾驶证审验与机动车无关<span id='hong'>不包含</span>车辆累积行驶里程。注意题干问的是<span id='hong'> “不属于”</span>。"
				},
				kztestarr: {
					question: 'جاڭبىرلى كۇنى قول شارتىر نەمەسە كۇندىك كوتەرگەن ادمدار جولدى كەسىپ وتسە قالاي ىستەۋ كەرەك؟',
					option1: 'قالىپتى جىلدامدىقپەن وتەمىز',
					option2: 'قارقىندى ارتتىرىپ بۇرىلا بەرەمىز',
					option3: 'سول باعىتتان قارسى كەلگەن اۆتوكولىكتى الدىمەن وتكىزەمىز',
					option4: 'قارقىندى باياۋلاتىپ اقىرىن بۇرىلامىز',
					answer: 'D',
					explain: '',
					chapter: ''
				},
				uytestarr: {
					question: 'يامغۇر ياغقان كۈنلەردە، كۈنلۈك تۇتقان ياكى يامغۇرلۇق چاپان كىيىپ ماڭغان پىيادىلەرگە يولۇققاندا قانداق قىلىش كېرەك؟',
					option1: 'نورمال سۈرئەتتە يۈرۈش كېرەك',
					option2: 'سىگنال بېرىپ قارشى تەرەپنىڭ يول بېرىشىگە بەلگە بېرىش كېرەك',
					option3: 'سۈرئەتتنى تېزلىتىپ ئايلىنىپ ئۆتۈپ كېتىش كېرەك',
					option4: 'ئالدىن سىگنال بېرىپ سۈرئەتنى مۇۋاپىق ئاستىلىتىش كېرەك',
					answer: 'D',
					explain: '',
					chapter: ''
				},
				//数据库操作
				//获取数据库数量
				datacount: 0,
				subject: 'C1C2C3', //科目
				subarrid: [], //题id
				subarr: {},
				viewsindex: 0, //已经看完的题
				kemu: 1,
				lolang: 'CN',
				jsonplus: false,
				storageindex: -1, //存储引导id
				storagearr: [],
				star: 0,
				tiimg: '',
				jin: false, //动画特效开光
				classz: 'tanchu', //动画样式
				zzlx: 0,
				cuotilist: [], //错题列表
				backMusicType: true,
				musicShow: true,
				videoVisible: false,
				videoUrl: "",
				videoFlag: 1,

				videoContext: null,
				imgmodalBox: false,

				videoboxviible: false,
				videoimgvisible: true,
				videoFM: "../../static/images/videoimgcn.png",
			};
		},
		onBackPress() {
			// console.log('点击返回键：onBackPress');
			var that = this;
			var kemus = that.kemu;
			if (kemus == 0) {
				uni.redirectTo({
					url: '../index/qualification'
				});
				// that.$u.route({
				// 	url: 'pages/index/qualification',
				// 	params: {}
				// });
			} else {
				uni.redirectTo({
					url: '../index/index'
				});
				// that.$u.route({
				// 	url: 'pages/index/index',
				// 	params: {}
				// });
			}

			return false;
		},
		onUnload() {
			// console.log('点击返回键：onUnload()');
			var that = this;
			var kemus = that.kemu;
			innerAudioContext.stop()
			if (kemus == 0) {
				uni.redirectTo({
					url: '../index/qualification'
				});
			} else {
				uni.redirectTo({
					url: '../index/index'
				});
			}
		},
		onLoad(options) {
			var that = this;



			var kemu = options.kemu;
			that.kemu = kemu;
			var zzlx = options.zzlx;
			var surawsane = options.kemusane
			that.zzlx = zzlx;
			// uni.getStorage({
			// 	key: 'cart_type',
			// 	success: function(res) {
			// 		console.log(res, '=====');
			// 		console.log(res.data);
			// 		console.log('getCarType--=', getCarType(res.data));
			// 		that.subject = getCarType(res.data);

			// 	}
			// });

			var carttypes = uni.getStorageSync('cart_type');
			that.subject = getCarType(carttypes);


			var langstr = uni.getStorageSync('lang_key');
			that.$i18n.locale = langstr;
			that.lang = langstr;
			if (langstr == 'cn') {
				that.lolang = 'CN';
				that.videoFM = "../../static/images/videoimgcn.png"
			}
			if (langstr == 'uy') {
				that.lolang = 'UG';
				that.videoFM = "../../static/images/videoimgun.png"
			}
			if (langstr == 'kz') {
				that.lolang = 'KAZ';
				that.videoFM = "../../static/images/videoimgkn.png"
			}
			if (langstr == 'cn') {
				that.langheight = 20;
			} else {
				that.langheight = 38;
			}

			//演示使用
			if (options.showcart == 'true') {
				that.showcart = true;
			}
			if (options.show == 'true') {
				that.show = true;
			}
			//演示结束
			if (that.colorStyle == true) {
				that.background.backgroundColor = '#2d2d2d';
				that.titlecolor = '#888888';
			} else {
				that.background.backgroundColor = '#ffffff';
				that.titlecolor = '#2d2d2d';
			}
			//先查找字体保存情况  如果有存储 直接使用
			uni.getStorage({
				key: 'fontsize',
				success: function(res) {
					//console.log(res.data);
					that.fontSize = res.data;
				}
			});
			uni.getStorage({
				key: 'musicbars',
				success: function(res) {
					//console.log(res.data);
					that.musicchecked = res.data;
				}
			});
			uni.getStorage({
				key: 'vibratebars',
				success: function(res) {
					that.zhenchecked = res.data;
				}
			});
			uni.getStorage({
				key: 'nextbars',
				success: function(res) {
					that.nextchecked = res.data;
				}
			});
			uni.getStorage({
				key: 'colorStyle',
				success: function(res) {
					that.colorStyle = res.data;
					that.titlebgcolor(res.data);
				}
			});

			//类型
			uni.getStorage({
				key: 'cart_type',
				success: function(res) {
					// console.log(res.data);
					// console.log('cartype ----------');
				},
				fail() {}
			});

			// 题库年份
			uni.getStorage({
				key: 'year_key',
				success: function(res) {
					// console.log("年份", res.data)
					that.year = res.data
				},
				fail() {
					that.$u.route({
						url: 'pages/setting/setting',
						params: {}
					});
				}
			});


			// 注释1
			// //#ifdef APP-PLUS

			// //读取本地数据

			// if (isOpen('data')) {
			// 	//数据库已打开
			// 	// console.log('数据库已打开');
			// 	that.dbcount(kemu);
			// } else {
			// 	//数据库没有打开  先打开
			// 	// console.log('数据库未打开');
			// 	that.openDb();
			// }
			// //打开数据库后 要获取数据数量
			// getTable('data').then(res => {
			// 	// console.log(res);
			// });

			// //要加载数据库   问题：为了方便一题一题加载。  全部加载可能卡顿。 可是先获取总数量，当前是第几道题
			// //#endif

			//读取网上的数据
			// uni.showLoading({
			// 	title: "加载中...",
			// 	mask: true
			// })
			// console.log("surawsane=" + surawsane);
			that.minicounts(surawsane);
			//记录查询
			uni.getStorage({
				key: that.subject + '_recite_' + that.lang + '_' + that.kemu,
				success: function(res) {
					// console.log(res, '==*********8==');
					// console.log(res.data);
					var indexdata = res.data;
					that.viewsindex = indexdata;
					that.kemuminidata(indexdata);
					//错题收藏列表
					that.cuotilists();
				},
				fail(e) {
					// console.log('index key no', e);
					//没有任何记录

					uni.setStorage({
						key: that.subject + '_recite_' + that.lang + '_' + that.kemu,
						data: 0,
						success: function() {
							// console.log('success');
							that.kemuminidata(0);
							//错题收藏列表
							that.cuotilists();
						}
					});
				}
			});


		},
		onShow() {
			this.openDb();
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo', this);
		},
		methods: {
			handleback() {
				console.log("222222")
				uni.navigateBack({
					delta: 1
				});
			},
			handlevideoBox() {
				this.videoboxviible = true
				this.videoimgvisible = false
			},
			handleClosevideo() {
				this.videoboxviible = false
				this.videoimgvisible = true
			},
			handleCloseimg() {
				this.imgmodalBox = false
			},
			handleNav() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleVideo(e) {
				// console.log("videoerro", e)
				this.videoVisible = false
				console.log('这是1');
			},

			handleImgBig(img) {

				console.log("放大", img);
				this.imgmodalBox = true
				this.tiimg = img
				// var arrimg = [];
				// arrimg.push(img)
				// wx.previewImage({
				// 	urls: arrimg, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				// 	current: '', // 当前显示图片的http链接，默认是第一个
				// 	success: function(res) {
				// 		// console.log("已放大")
				// 	},
				// 	fail: function(res) {},
				// 	complete: function(res) {},
				// })

			},


			btnBackMusicType(type, value) {
				// console.log("语音")
				var that = this;
				let playurl = ""
				if (value == null) {
					return false;
				}
				if (type == 'yuyin') {
					playurl = "https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/yuyin/" + value + ".mp3";
				}

				if (that.lang == 'cn') {

					if (type == 'jieshi') {
						playurl = "https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/jieshi/" + value +
							"_js.mp3"
					}
					if (type == 'jq') {
						playurl = "https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/jiqiao/" + value +
							"_jq.mp3"
					}
				} else {

					if (type == 'jq') {
						playurl = "https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/jieshi/" + value +
							"_js.mp3"
					}
					// if (type == 'jieshi') {
					// 	playurl = "https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/jieshi/" + value +
					// 		"_js.mp3"
					// }

				}
				// var playurl = "https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/yuyin/" + value + ".mp3"
				innerAudioContext.autoplay = true;
				innerAudioContext.loop = false; //循环播放
				innerAudioContext.src = playurl + '?id=' + Math.ceil(Math.random() * 10);
				// console.log("that.musicShow", that.musicShow)
				// console.log("innerAudioContext.src", innerAudioContext.src)
				// console.log("innerAudioContext", innerAudioContext);
				// if()
				if (that.musicShow) {
					// console.log('播放')
					innerAudioContext.onPlay(() => {
						// 播放监听
						// console.log('播放!');
						that.musicShow = false;
					});
				} else {
					// console.log('暂停')
					innerAudioContext.onPause(() => {
						// 暂停监听
						// console.log('暂停播放!');
						that.musicShow = true;

					});
				}

				innerAudioContext.onEnded(() => {
					// 结束播放监听
					// console.log('播放结束!');
					that.musicShow = true;
					//自动切换事件
					//this.qeihuanwenjian()
				});

				// this.musicShow=!this.musicShow;
			},


			feed() {
				var that = this;
				//链接到意见反馈页面
				var feedtype = 1;
				var dbid = that.subarr.tid;
				uni.navigateTo({
					url: '../feedback/feedback?fankuitype=' + feedtype + '&tid=' + dbid
				})
			},
			minicounts(cound) {
				var that = this;
				var est = [];
				for (var i = 0; i < cound; i++) {
					est[i] = {
						useranswer: null,
						answer: null,
						tid: 0,
						twrahate: 2
					};
				}
				//console.log("estestestest===="+est);
				that.subarrid = est;
				uni.hideLoading();
			},
			cuotilists() {
				var that = this;
				that.https({
					url: cuotilist_api,
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {
						tlang: that.lolang,
						ktype: that.subject,
						zhengjianlx: that.zzlx, //资格证是 科目是0
						kemu: that.kemu,
						ttype: -1
					},
					success: res => {
						console.log(res);
						that.cuotilist = res.list;
					},
					fail: err => {
						console.log(err);
						uni.showModal({
							title: '错误提示',
							content: err,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				});
			},

			kemuminidata(index) {
				// this.videoVisible = true
				// this.videoVisible = false
				var that = this;
				//停止题目播放



				that.flag = 0; //防止再次滑动
				// console.log("index=", index);
				if (index == undefined) {
					index = 0;
				}
				var indexnum = index.toString();
				// uni.showLoading({
				// 	title: '加载中',
				// 	mask: true
				// });
				that.https({
					url: tikuindex_api,
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {
						lang: that.lolang,
						zzlx: that.zzlx,
						kemu: that.kemu, //资格证是 科目是0
						ktype: that.subject,
						index: indexnum,
						year: that.year
					},
					success: res => {
						// that.videoFlag = 1
						// console.log("0000000", res);
						var kemuimg = res.timu;
						that.tiimg = '';
						that.subarr = {};
						if (kemuimg.timg == "") {
							that.imgmodalBox = false
						}
						that.tiimg = yunurl + kemuimg.timg;
						that.subarr = res.timu;
						console.log("题目==========", that.subarr)
						that.videoboxviible = false
						if (res.timu.haveVideo == 1) {
							that.videoVisible = true
							that.videoimgvisible = true
						} else {
							that.videoVisible = false
							that.videoimgvisible = false
						}

						if (that.subarr.chapter != null) {
							var s = "";
							// let width = uni.getStorageSync('screen');
							s = that.subarr.chapter.replace(/\<font/gi, "<span style='color:#FF0000'");
							s = s.replace(/font>/gi, "span>");
							that.subarr.chapter = s
						}
						that.videoUrl =
							"https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/shipin/" + that
							.subarr
							.tid + "_sp.mp4"
						//判断是否收藏过？
						var arr = that.cuotilist;
						//默认不收藏
						that.star = 0;
						that.subarr.collect = 0;

						if (arr.length == 0) {
							that.star = 0;
							that.subarr.collect = 0;
						} else {
							for (var i = 0; i < arr.length; i++) {
								if (arr[i].tid === kemuimg.tid) {
									that.star = 1;
									that.subarr.collect = 1;
								}
							}
							// arr.every(item=>{
							// 	console.log("item.tid === kemuimg.tid",item.tid,"*****  ",kemuimg.tid)
							//    if(item.tid === kemuimg.tid) {
							// 	   that.star = 1;
							// 	   that.subarr.collect = 1;
							//    }else{
							//        that.star = 0;
							//        that.subarr.collect = 0;
							//    }
							// });
						}

						//记录背题id
						uni.setStorage({
							key: that.subject + '_recite_' + that.lang + '_' + that.kemu,
							data: that.viewsindex,
							success: function() {}
						});
					},
					fail: err => {
						console.log(err);
						uni.showModal({
							title: '错误提示',
							content: err,
							success: function(res) {
								if (res.confirm) {
									// console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				});
			},

			showka() {
				var that = this;
				that.showcart = true;
			},
			backindex() {
				var that = this;
				// console.log("进入跳转")
				if (that.kemu == 0) {
					uni.switchTab({
						url: '../index/qualification'
					});
				} else {
					uni.switchTab({
						url: '../index/index'
					});
				}
			},
			openDb() {
				var that = this;
				if (isOpen('data')) return;
				openDb('data').then(res => {
					// console.log(res);
					that.dbcount(that.kemu);
				});
			},
			savestar(id) {
				var that = this;


				// 注释2
				// //#ifdef APP-PLUS
				// // console.log('star id=', id);
				// var dbid = that.subarrid[id].tid;
				// if (that.star == 0) {
				// 	updateSQL(
				// 		'data',
				// 		'Tiku', {
				// 			collect: 1
				// 		},
				// 		'tid',
				// 		dbid
				// 	).then(res => {
				// 		// console.log('1111, wancheng');
				// 		that.star = 1;
				// 	});
				// } else {
				// 	updateSQL(
				// 		'data',
				// 		'Tiku', {
				// 			collect: 0
				// 		},
				// 		'tid',
				// 		dbid
				// 	).then(res => {
				// 		// console.log('1111, wancheng');
				// 		that.star = 0;
				// 	});
				// }
				// //#endif

				if (that.star == 0) {
					that.https({
						url: shoucang_api,
						method: 'POST',
						header: {
							'content-type': 'application/json'
						},
						data: {
							tid: that.subarr.tid,
							type: 1, //0 表示取消收藏， 1加入收藏 -1收藏数减1
							daan: that.subarr.answer,
							tlang: that.lolang,
							ktype: that.subject,
							zhengjianlx: that.zzlx, //资格证是 科目是0
							kemu: that.kemu,
							ttype: -1
						},
						success: res => {
							// console.log(res);
							that.subarr.collect = 1;
							that.star = 1;
							that.cuotilists();
						},
						fail: err => {
							// console.log(err);
							uni.showModal({
								title: '错误提示',
								content: err,
								success: function(res) {
									if (res.confirm) {
										// console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
					});
				} else {
					that.https({
						url: shoucang_api,
						method: 'POST',
						header: {
							'content-type': 'application/json'
						},
						data: {
							tid: that.subarr.tid,
							type: 0, //0 表示取消收藏， 1加入收藏 -1收藏数减1
							daan: that.subarr.answer,
							tlang: that.lolang,
							ktype: that.subject,
							zhengjianlx: that.zzlx, //资格证是 科目是0
							kemu: that.kemu,
							ttype: -1
						},
						success: res => {
							console.log(res);
							that.subarr.collect = 0;
							that.star = 0;
							that.cuotilists();
						},
						fail: err => {
							// console.log(err);
							uni.showModal({
								title: '错误提示',
								content: err,
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
					});
				}


				// console.log("dbid",dbid);
				// updateSQL('data', 'Tiku', {
				// 	collect: 1
				// }, 'tid', dbid).then(res => {
				// 	console.log('1111, wancheng');
				// 	that.star = 1;
				// })
			},
			onimgerr() {
				var that = this;
				that.subarr.timg = '';
			},
			minidate() {},
			dbcount() {
				var that = this;

				//记录查询
				uni.getStorage({
					key: that.subject + '_recite_' + that.lang + '_' + that.kemu,
					success: function(res) {
						console.log(res, '==*********8==');
						console.log(res.data);
						var indexdata = res.data;
						that.viewsindex = indexdata;
						that.dbid(indexdata);
					},
					fail(e) {
						// console.log('index key no', e);
						//没有任何记录

						uni.setStorage({
							key: that.subject + '_recite_' + that.lang + '_' + that.kemu,
							data: 0,
							success: function() {
								console.log('success');
								that.dbid();
							}
						});
					}
				});

				plus.sqlite.selectSql({
					name: 'data',
					sql: 'select count(*) as num from Tiku where kemu=' + that.kemu + " and ktype='" + that
						.subject + "' and year = '" + that.year + "' and tlang = '" + that.lolang,
					success(e) {
						// console.log(e);
						// console.log(e[0].num);
						// console.log('select count(*) as num from Tiku where kemu=' + that.kemu + " and ktype='" +
						// 	that.subject + "' and year = '" + that.year + "' and tlang = '" + that.lolang + "'"
						// );
						that.datacount = e[0].num;
					},
					fail(e) {
						// console.log(e);
					}
				});
			},
			dbid(indexdata) {
				var that = this;
				plus.sqlite.selectSql({
					name: 'data',
					sql: 'select tid from Tiku where kemu=' + that.kemu + " and ktype='" + that.subject +
						"' and year = '" + that.year +
						"' and tlang = '" + that.lolang + "' order by ttype asc",
					success(e) {
						//console.log(e);
						that.subarrid = e;
						var index = 0;
						if (indexdata !== 0) {
							index = indexdata;
						} else {
							index = 0;
						}
						if (index == undefined) {
							index = 0;
						}
						// console.log(index, 'index');
						var tid = e[index].tid;
						that.subjectarr(tid);
					},
					fail(e) {
						// console.log(e);
					}
				});
			},
			tiao(ind) {
				var that = this;
				// console.log('ind ', ind);
				var dbid = that.subarrid[ind].tid;
				// 注释7
				// // #ifdef APP-PLUS
				// that.subjectarr(dbid);
				// // #endif
				that.viewsindex = ind;
				that.kemuminidata(ind);
			},
			clearindex() {
				var that = this;
				
				//注释8
				// // #ifdef APP-PLUS
				// uni.showModal({
				// 	title: this.$t('keeping.提示'),
				// 	content: this.$t('keeping.提示内容'),
				// 	success: function(res) {
				// 		if (res.confirm) {
				// 			uni.setStorage({
				// 				key: that.subject + '_recite_' + that.lang + '_' + that.kemu,
				// 				data: 0,
				// 				success: function() {
				// 					that.tiao(0);
				// 				}
				// 			});
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消');
				// 		}
				// 	}
				// });
				// // #endif
				//等待hurmet接口
				uni.showModal({
					title: this.$t('keeping.提示'),
					content: this.$t('keeping.提示内容'),
					success: function(res) {
						if (res.confirm) {
							that.https({
								url: alldelshoucang_api,
								method: 'POST',
								header: {
									'content-type': 'application/json'
								},
								data: {},
								success: res => {
									// console.log(res);
									//app缓存到本地
									//小程序读取在线
									that.subarr.collect = 0;
									that.star = 0;
									that.cuotilists();
									uni.setStorage({
										key: that.subject + '_recite_' + that.lang + '_' +
											that.kemu,
										data: 0,
										success: function() {
											that.tiao(0);
										}
									});

								},
								fail: err => {
									// console.log(err);
									uni.showModal({
										title: '错误提示',
										content: err,
										success: function(res) {
											if (res.confirm) {
												console.log('用户点击确定');
											} else if (res.cancel) {
												console.log('用户点击取消');
											}
										}
									});
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			subjectarr(tid) {
				// this.videoVisible = true
				// this.videoVisible = false
				var that = this;
				var sql = 'select * from Tiku where kemu=' + that.kemu + " and  ktype='" + that.subject +
					"' and year = '" + that.year +
					"' and tlang = '" + that.lolang + "' and tid = " + tid + ' ';
				plus.sqlite.selectSql({
					name: 'data',
					sql: sql,
					success(e) {
						that.videoFlag = 1
						console.log(e, '8852369412638');
						// console.log(e.length);
						if (e.length == 0) {
							console.log('全部已经看完了！');
						} else {
							//that.subarr = e;

							that.https({
								url: tikutid_api,
								method: "POST",
								header: {
									"content-type": "application/json",
								},
								data: {
									tid: tid,
									year: that.lolang == 'CN' ? 2023 : that.year,
								},
								success: (res) => {
									// console.log("接口数据", res, tid)
									that.videoboxviible = false
									if (res.timu.haveVideo == 1) {
										that.videoVisible = true
										that.videoimgvisible = true
									} else {
										that.videoVisible = false
										that.videoimgvisible = false
									}

								},
								fail: (err) => {
									console.log("接口未获取数据")

								},


							})
							that.smalljson(e);
							//记录背题id
							uni.setStorage({
								key: that.subject + '_recite_' + that.lang + '_' + that.kemu,
								data: that.viewsindex,
								success: function() {}
							});
						}
						//console.log(e.length)
					},
					fail(e) {
						console.log(e);
					}
				});
			},
			smalljson(jso) {
				//简单方法封装
				var that = this;
				let strs = this.newtools.fun2();
				let jsonstr = this.newtools.fun1(strs);

				let arrjson = jso[0];
				// console.log("arrjson.chapter",arrjson.chapter)
				// let chapters = chapter;
				// arrjson.chapter = graceRichText.format(chapters);

				if (arrjson.chapter) {
					let chapter = arrjson.chapter;
					let chapters = this.AES.decrypt(chapter, jsonstr, '_tongyongjiakao_');
					arrjson.chapter = chapters;

					let type = uni.getStorageSync("exam_type")
					if (this.lolang == 'CN' && type == 'jiashizheng') {
						var s = "";
						s = arrjson.chapter.replace(/\<font/gi, "<span style='color:#FF0000'");
						s = s.replace(/font>/gi, "span>");
						arrjson.chapter = s
					}
				}



				// let option1 = arrjson.option1;
				// let option1s = option1;
				// arrjson.option1 = option1s;
				if (arrjson.option1) {
					let option1 = arrjson.option1;
					let option1s = this.AES.decrypt(option1, jsonstr, '_tongyongjiakao_');
					arrjson.option1 = option1s;
				}


				// let option2 = arrjson.option2;
				// let option2s = option2;
				// arrjson.option2 = option2s;
				if (arrjson.option2) {
					let option2 = arrjson.option2;
					let option2s = this.AES.decrypt(option2, jsonstr, '_tongyongjiakao_');
					arrjson.option2 = option2s;
				}


				// let option3 = arrjson.option3;
				// let option3s = option3;
				// arrjson.option3 = option3s;
				if (arrjson.option3) {
					let option3 = arrjson.option3;
					let option3s = this.AES.decrypt(option3, jsonstr, '_tongyongjiakao_');
					arrjson.option3 = option3s;
				}


				// let option4 = arrjson.option4;
				// let option4s = option4;
				// arrjson.option4 = option4s;
				if (arrjson.option4) {
					let option4 = arrjson.option4;
					let option4s = this.AES.decrypt(option4, jsonstr, '_tongyongjiakao_');
					arrjson.option4 = option4s;
				}


				// let question = arrjson.question;
				// let questions = question;
				// arrjson.question = questions;
				let question = arrjson.question;
				let questions = this.AES.decrypt(question, jsonstr, '_tongyongjiakao_');
				arrjson.question = questions;

				// let tdesc = arrjson.tdesc;
				// let tdescs = tdesc;
				// arrjson.tdesc = tdescs;
				if (arrjson.tdesc) {
					let tdesc = arrjson.tdesc;
					let tdescs = this.AES.decrypt(tdesc, jsonstr, '_tongyongjiakao_');
					arrjson.tdesc = tdescs;
				}

				if (arrjson.collect == 1) {
					that.star = 1;
				} else {
					that.star = 0;
				}


				// console.log(arrjson.timg.length);
				if (arrjson.timg != null && arrjson.timg.length > 0) {
					//var imgname = getimgname(arrjson.timg) + '.json';
					var imgname = arrjson.timg;
					// console.log('imgname', imgname);
					var filePath = '_doc/tjson/' + imgname;
					//先判断 static文件夹中是否存在
					var wwwpath = '_www/static/tjson/' + imgname;
					var dovpath = '_doc/tjson/' + imgname;
					that.tiimg = wwwpath;
					// plus.io.resolveLocalFileSystemURL(
					// 	wwwpath,
					// 	function(entry) {
					// 		//如果www中找到
					// 		plus.io.requestFileSystem(plus.io.PRIVATE_WWW, function(fs) {
					// 			// fs.root是根目录操作对象DirectoryEntry
					// 			fs.root.getFile(
					// 				'static/tjson/' + imgname, {
					// 					create: true
					// 				},
					// 				function(fileEntry) {
					// 					let base;
					// 					fileEntry.file(function(file) {
					// 						var fileReader = new plus.io.FileReader();
					// 						console.log('getFile:' + JSON.stringify(file));
					// 						fileReader.readAsText(file, 'utf-8');

					// 						fileReader.onloadend = function(evt) {
					// 							console.log('11' + evt);
					// 							console.log('evt.target' + evt.target);

					// 							if (base == 'undefined') {
					// 								that.tiimg = '';
					// 							} else {
					// 								//var macstr = base.replaceAll('\r\n', '');
					// 								//console.log(macstr);
					// 								//console.log(evt.target.result);

					// 								that.tiimg = base;
					// 							}

					// 							// arrjson.timg = base;
					// 						};
					// 						fileReader.onprogress = function(e) {
					// 							console.log('onprogress ---> ', e);
					// 						};

					// 						fileReader.onload = function(evt) {
					// 							console.log('on load sss');
					// 							var imgstr = evt.target.result;
					// 							//console.log(imgstr);
					// 							//var imgbase = imgstr.split('######');
					// 							//let s = that.AES.decrypt(imgbase[0],
					// 							//	'1jhtconstrj2age3', '_tongyongjiakao_');
					// 							//解密值
					// 							//console.log(s);

					// 							//var johnr = imgbase[1].replaceAll('\r\n', '');
					// 							base = imgstr;
					// 							//console.log(base)
					// 							//var imgend = johnr;
					// 							that.tiimg = imgstr;
					// 							//console.log({'tt':imgend},base)
					// 						};
					// 						console.log(file.size + '--' + file.name);
					// 						fileReader.start();
					// 						//console.log(base);
					// 					});
					// 				}
					// 			);
					// 		});
					// 	},
					// 	function(e) {
					// 		//如果www中没有找到
					// 		plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
					// 			// fs.root是根目录操作对象DirectoryEntry
					// 			fs.root.getFile(
					// 				'tjson/' + imgname, {
					// 					create: true
					// 				},
					// 				function(fileEntry) {
					// 					let base;
					// 					fileEntry.file(function(file) {
					// 						var fileReader = new plus.io.FileReader();
					// 						console.log('getFile:' + JSON.stringify(file));
					// 						fileReader.readAsText(file, 'utf-8');

					// 						fileReader.onloadend = function(evt) {
					// 							console.log('11' + evt);
					// 							console.log('evt.target' + evt.target);

					// 							if (base == 'undefined') {
					// 								that.tiimg = '';
					// 							} else {
					// 								//var macstr = base.replaceAll('\r\n', '');
					// 								//console.log(macstr);
					// 								//console.log(evt.target.result);

					// 								that.tiimg = base;
					// 							}

					// 							// arrjson.timg = base;
					// 						};
					// 						fileReader.onprogress = function(e) {
					// 							console.log('onprogress ---> ', e);
					// 						};

					// 						fileReader.onload = function(evt) {
					// 							console.log('on load sss');
					// 							var imgstr = evt.target.result;
					// 							//console.log(imgstr);
					// 							// var imgbase = imgstr.split('######');
					// 							// let s = that.AES.decrypt(imgbase[0],
					// 							// 	'1jhtconstrj2age3', '_tongyongjiakao_');
					// 							// //解密值
					// 							// console.log(s);

					// 							//var johnr = imgbase[1].replaceAll('\r\n', '');
					// 							base = imgstr;
					// 							//console.log(base)
					// 							//var imgend = johnr;
					// 							that.tiimg = imgstr;
					// 							//console.log({'tt':imgend},base)
					// 						};
					// 						console.log(file.size + '--' + file.name);
					// 						fileReader.start();
					// 						//console.log(base);
					// 					});
					// 				}
					// 			);
					// 		});
					// 	}
					// );

				} else {
					that.imgmodalBox = false
				}
				that.subarr = arrjson;
				that.videoUrl =
					"https://tongyongjiakao-1307163845.cos.ap-shanghai.myqcloud.com/shipin/" + that.subarr
					.tid + "_sp.mp4"
				// console.log(arrjson);
			},

			nextt() {
				var that = this;
				//停止播放
				that.musicShow = true;
				innerAudioContext.stop();

				var index = that.viewsindex + 1;
				if (index === that.datacount) {
					// console.log('全部已看完');
					this.flag = 0;
					uni.showToast({
						title: '这是最后一道题',
						duration: 2000
					});
					return false;
				}

				that.viewsindex = index;



				// 注释3
				// //#ifdef APP-PLUS
				// var tid = that.subarrid[index].tid;
				// //#endif
				//that.tanru();




				// 注释4
				// //#ifdef APP-PLUS
				// that.tiimg = '';
				// that.subarr = {};
				// that.subjectarr(tid);
				// //#endif



				that.kemuminidata(index);
				this.flag = 0;
				//存储记录
				// uni.setStorage({
				// 	key: that.subject + '_recite_' + that.kemu,
				// 	data: index,
				//  success: function() {
				//  	console.log('success');
				// 	}
				// });
			},

			privet() {
				var that = this;

				that.musicShow = true;
				innerAudioContext.stop();

				if (that.viewsindex === 0) {
					this.flag = 0;
					uni.showToast({
						title: '这是第一道题',
						duration: 2000
					});
					return false;
				}
				var index = that.viewsindex - 1;
				that.viewsindex = index;

				that.tiimg = '';

				// 注释5
				// //#ifdef APP-PLUS
				// var tid = that.subarrid[index].tid;
				// // #endif
				//that.tanchu();



				// 注释6
				// //#ifdef APP-PLUS
				// that.tiimg = '';
				// that.subarr = {};
				// that.subjectarr(tid);
				// // #endif



				that.kemuminidata(index);
				// uni.setStorage({
				// 	key: that.subject + '_recite_' + that.kemu,
				// 	data: index,
				// 	success: function() {
				// 		console.log('success');
				// 	}
				// });
				this.flag = 0;
			},
			settings: function() {
				console.log(this.show);
				if (this.show) {
					this.show = false;
				} else {
					this.show = true;
				}
			},

			sliderChange(e) {
				//设置字体大小
				// console.log('value 发生变化：' + e.detail.value);
				var that = this;
				that.fontSize = e.detail.value;
				//保存字体大小
				uni.setStorage({
					key: 'fontsize',
					data: e.detail.value,
					success: function() {
						// console.log('success');
					}
				});
			},
			musicbar(e) {
				// console.log('chufa = ', e);
				var that = this;
				that.musicchecked = e;
				//保存提示音
				uni.setStorage({
					key: 'musicbars',
					data: e,
					success: function() {
						// console.log('success');
					}
				});
			},
			vibrate(e) {
				var that = this;
				that.zhenchecked = e;
				//保存提示音
				uni.setStorage({
					key: 'vibratebars',
					data: e,
					success: function() {
						// console.log('success');
					}
				});
			},
			marknext(e) {
				var that = this;
				that.nextchecked = e;
				//保存自动跳转下一题
				uni.setStorage({
					key: 'nextbars',
					data: e,
					success: function() {
						// console.log('success');
					}
				});
			},
			titlebgcolor(bgcolors) {
				var that = this;
				if (bgcolors == true) {
					that.background.backgroundColor = '#2d2d2d';
					that.titlecolor = '#888888';
				} else {
					that.background.backgroundColor = '#ffffff';
					that.titlecolor = '#2d2d2d';
				}
			},
			colour: function(num) {
				// console.log(num);
				var that = this;
				var colors;
				if (num == 0) {
					that.colorStyle = true;
					colors = true;
					that.titlecolor = '#888888';
				} else {
					that.colorStyle = false;
					colors = false;
					that.titlecolor = '#2d2d2d';
				}
				uni.setStorage({
					key: 'colorStyle',
					data: colors,
					success: function() {
						// console.log('success');
						that.titlebgcolor(colors);
					}
				});
			},
			handletouchstart: function(event) {
				// console.log('hsha', '1236456');
				console.log('这是2');
				// this.lastX = event.changedTouches[0].pageX;
				this.lastXX = event.changedTouches[0].pageX;

				// this.startData.clientX = e.changedTouches[0].clientX;   //手指按下时的X坐标
				// this.startData.clientY = e.changedTouches[0].clientY;   //手指按下时的Y坐标
			},
			handletouchend: function(event) {
				var that = this;
				//停止滑动
				// console.log('2222222222222222222222222222');
				// console.log(event.changedTouches[0].pageX);
				// console.log(this.lastXX, this.lastX, event.changedTouches[0].pageX);
				// console.log('xxxx=', Math.abs(this.lastXX - event.changedTouches[0].pageX));
				// console.log("flag", this.flag);
				if (Math.abs(this.lastXX - event.changedTouches[0].pageX) > 80) {
					//在事件结束时，判断滑动的距离是否达到出发需要执行事件的要求
					// console.log('执行查看跳转事件');
					console.log("this.flag", this.flag)
					if (this.flag !== 0) {
						return;
					}
					// console.log("---", this.lastXX - this.lastX)
					// console.log("滑动qqqqqqqqqqq")
					if (this.lastXX - this.lastX > 0) {
						// console.log('向左滑动', this.lastXX - this.lastX);
						this.flag = 1;
						that.nextt(1);
					} else {
						// console.log('向右滑动', this.lastXX - this.lastX);
						this.flag = 2;
						that.privet(1);
					}
				} else {
					// console.log('滑动距离不够，不执行跳转');
				}
			},
			handletouchmove: function(event) {
				//console.log(event)
				if (this.flag !== 0) {
					return;
				}
				this.flag = 0;
				let currentX = event.changedTouches[0].pageX;
				let currentY = event.changedTouches[0].pageY;
				let tx = currentX - this.lastX;
				let ty = currentY - this.lastY;

				var that = this;
				var txnum = 0;

				//左右方向滑动
				// if (Math.abs(tx) > Math.abs(ty)) {

				// 	if (tx < 0) {
				// 		// 向左滑动
				// 		this.flag = 1;

				// 	} else if (tx > 0) {
				// 		//向右滑动
				// 		this.flag = 2;

				// 	}
				// }
				// console.log(this.flag);
				//上下方向滑动
				// else {
				//     if (ty < 0) {
				//         //向上滑动
				//         this.flag = 3;
				//     } else if (ty > 0) {
				//         //向下滑动
				//         this.flag = 4;
				//     }
				// }

				//将当前坐标进行保存以进行下一次计算
				this.lastX = currentX;
				this.lastY = currentY;
			},

			handlePause(e) {
				// this.videoContext.seek(0)
				// this.videoContext.play();
				this.muted = !this.muted
				console.log(e, 55555555555555);
			},
			stopvideo() {
				if (this.videoFlag == 2) {
					this.videoContext.stop();
					console.log('停止播放');
				}
			}

		}
	};
	//https://ext.dcloud.net.cn/plugin?id=3456  单选多选使用
</script>

<style scoped lang="scss">
	.videoimg {
		width: 690rpx;
		height: 388rpx;
		position: relative;
		margin-top: 30rpx;

		.videocount {
			height: 50rpx;
			display: inline-block;
			color: #ffffff;
			position: absolute;
			bottom: -10rpx;
			right: 5rpx;
		}


	}

	.videoimg image {
		width: 690rpx;
		height: 388rpx;
		border-radius: 20rpx;
		border: solid 1rpx #20231D;
		position: absolute;
	}

	.viewvideo {
		width: 690rpx;
		height: 420rpx;
		position: relative;
		margin-top: 31rpx;
	}

	.videoc {
		width: 690rpx;
		height: 420rpx;
	}

	.scroll-Ys {
		height: calc(100vh - 88rpx - 210rpx);
		// height: 1320rpx;
	}

	.mheight {
		display: block;
		// height: calc(100vh - 70px - 220rpx);
	}

	/* style */
	page {
		height: 100%;
	}

	* {
		touch-action: auto;
	}

	image {
		height: auto;
	}

	.cnlayout .topictype {
		margin-top: 10rpx;
	}

	.cnlayout .toppicplay {
		margin-top: 10rpx;
	}

	.clearfloat {
		clear: both;
		height: 0;
		font-size: 1px;
		line-height: 0px;
	}

	/* .mheight {
		display: block;
		height: calc(100vh - 70px - 30rpx);
	} */

	.csimg {
		vertical-align: middle;
		padding-top: 12rpx;
	}

	.colles {
		width: 40rpx;
		margin: 0rpx auto 0 auto;
	}

	.nodeheight {
		line-height: 200% !important;
	}

	.nodeheight div {
		line-height: 200% !important;
	}

	.nodeheight p {
		line-height: 200% !important;
	}

	.timg {
		width: 700rpx;
		height: 350rpx;
		margin: 0 auto 20rpx auto;
		/* padding-bottom: 20rpx; */
	}

	.timg image {
		width: 700rpx;
		height: 325rpx;
		margin: 0 auto;
		padding: 20rpx 0rpx;
	}

	.kz .answerselect {
		margin-top: -9rpx;
	}

	.uy .answerselect {
		margin-top: -9rpx;
	}

	.grenntext {
		color: #0bd34e;
	}

	.txtalign {
		text-align: justify;
		vertical-align: top;
	}

	/* #ifdef MP-WEIXIN */
	.u-navbar-content-title {
		left: 80rpx !important;
	}

	.settingfoot button::after {
		border: none;
	}

	.settingfoot button {
		border: 1rpx solid #eeeeee;
	}

	/* #endif */
	.carttitle {
		display: flex;
		flex-direction: row;
		align-items: center;
		text-align: center;
		justify-content: space-between;
		width: 750rpx;
		height: 80rpx;
		background: #f8f8f8;
	}

	.carttitleview {
		width: 250rpx;
		display: inline-block;
	}

	.cartcon {
		width: 750rpx;
		height: 620rpx;
		/* overflow-y: auto; */
		position: relative;
	}

	.scroll-Y {
		height: 620rpx;
	}

	.cartconview {
		display: flex;
		flex-direction: row;
		align-items: center;
		text-align: center;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: #ffffff;
	}

	.cartconnum {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 80rpx;
		display: inline-block;
		border: 1px solid #bbbbbb;
		margin: 15rpx;
	}

	.kz .cartconnum {
		line-height: 95rpx;
	}

	.uy .cartconnum {
		line-height: 95rpx;
	}

	.cartpink {
		background: #fed4d5;
		color: #db7d7b;
		border: none;
	}

	.cartblue {
		background: #bee3fe;
		color: #4f86af;
		border: none;
	}

	.cartaction {
		border: solid 1rpx #4f86af;
		color: #4f86af;
	}

	.pl-20 {
		padding-left: 20rpx;
	}

	.pl-10 {
		padding-left: 10rpx;
	}

	.pb50 {
		padding-bottom: 50rpx;
	}

	.black {
		background: #2d2d2d;
		height: 100%;
		display: block;
		overflow: hidden;
		overflow-y: auto;
		position: relative;
	}

	.black .answerabcd {
		background: #ffffff;
		// box-shadow: 4px #e6e6e6;
	}

	.black .popup {
		color: #2d2d2d;
	}

	.white {
		background: #ffffff;
		height: 100%;
		display: block;
		overflow: hidden;
		overflow-y: auto;
		position: relative;
	}

	.white .answerabcd {
		background: #ffffff;
		// box-shadow: 4px #e3e3e3;
	}

	.pt-10 {
		padding-top: 10rpx;
	}

	.marfoot {
		width: 750rpx;
		height: 130rpx;
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
	}

	.markfoot {
		width: 750rpx;
		height: 130rpx;
		line-height: 130rpx;
		// box-shadow: -5rpx 0px 5px #F7F7F7;
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		padding: 30rpx;
		display: flex;
		box-sizing: border-box;

		flex-direction: row;
		align-items: center;
		text-align: center;
		justify-content: space-between;

		.markfoot-last {
			display: flex;
			align-items: center;

			.last-text {
				// font-size: 26rpx;
				// font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				// color: #2B2B2B;
			}

			.last-img {
				width: 26rpx;
				height: 26rpx;
				margin-left: 10rpx;
			}
		}

		.markfoot-right {
			width: 40rpx;
			height: 70rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.right-text {
				// font-size: 24rpx;
				// font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				// color: #2B2B2B;
				line-height: 40rpx;
			}

			.right-img {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.markfoot-jiangjie {
			margin-top: -30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.jiangjie-text {
				// font-size: 24rpx;
				// font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				// color: #2B2B2B;
				line-height: 28rpx;
				margin-top: 8rpx;
			}

			.jiangjie-img {
				width: 82rpx;
				height: 82rpx;
				margin-top: -38rpx;
				// margin-left: 10rpx;
			}
		}

		.next {
			.last-img {
				margin-left: 10rpx;
			}
		}
	}

	.white .marfoot {
		background: #fefffd;
	}

	.black .marfoot {
		background: #20231d;
	}

	// .markfoot {
	// 	width: 750rpx;
	// 	height: 130rpx;
	// 	line-height: 130rpx;
	// 	box-shadow: -5rpx 0px 5px #848584;
	// 	position: fixed;
	// 	left: 0rpx;
	// 	bottom: 0rpx;
	// 	/* padding-bottom: 50rpx; */
	// 	display: flex;
	// 	flex-direction: row;
	// 	align-items: center;
	// 	text-align: center;
	// 	justify-content: space-between;
	// }

	.white .markfoot {
		background: #fefffd;
	}

	.black .markfoot {
		background: #20231d;
	}

	.markfootview {
		display: inline-block;
	}

	.pl-15 {
		padding-left: 15rpx;
	}

	.pr-15 {
		padding-right: 15rpx;
	}

	.answercol {
		width: 700rpx;
		padding: 10rpx 0rpx;
		border-radius: 5rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		text-align: center;
		justify-content: space-between;
		border-bottom: 1px solid rgba(0, 0, 0, 0.5);
	}

	.white .answercol {
		background: #f6f7f6;
	}

	.black .answercol {
		background: #20231d;
	}

	.answerow {
		width: 200rpx;
		display: inline-block;
	}

	.answerclear {
		width: 300rpx;
		display: inline-block;
	}

	.answermark {
		width: 700rpx;
		margin: 10rpx auto;
		padding-bottom: 130rpx;
	}

	.answermarktitle {
		width: 700rpx;
		padding: 5rpx 0rpx;
	}

	.answermarkcon {
		padding: 5rpx 0rpx;
		line-height: 150%;
	}

	.bluemark {
		color: #3185c4;
	}

	.pinkmark {
		color: #e81242;
	}

	.answer {
		margin: 25rpx 0;
	}

	.answers {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: left;
		vertical-align: middle;
		padding: 25rpx 0rpx;
	}

	.kz .answers {
		justify-content: right;
	}

	.uy .answers {
		justify-content: right;
	}

	.answerselect {
		display: inline-block;
		align-items: flex-start;
	}

	.answerstext {
		display: inline-block;
		align-items: flex-start;
		padding-left: 10rpx;
		text-align: justify;
	}

	.kz .answerstext {
		padding-left: 0rpx !important;
		padding-right: 10rpx;
	}

	.uy .answerstext {
		padding-left: 0rpx !important;
		padding-right: 10rpx;
	}

	.answerabcd {
		border-radius: 50%;
		text-align: center;
		border: 1rpx solid #D4D4D4;
		font-size: 28rpx;
		font-weight: 200;
		color: #4B4B4B;
		background-color: #FFFFFF;
	}

	.anschack .answerabcd {
		background: #0DA0FF;
		color: #ffffff;
	}

	.anschack .answerstext {
		color: #0DA0FF;
	}

	.anschackp .answerabcd {
		background: #0DA0FF;
		color: #ffffff;
	}

	.anschackp .answerstext {
		color: #0DA0FF;
	}

	.hate .answerabcd {
		background: #ffffff;
		color: #4e4e4e;
	}

	.wrong .answerabcd {
		background: #ff0000;
		color: #ffffff;
	}

	.wrong .answerstext {
		color: #ff0000;
	}

	.topic {
		width: 750rpx;
		margin: 0 auto;
		display: block;
		position: relative;
	}

	.topiccon {
		display: block;
		padding: 2rpx 5rpx;
		text-align: justify !important;
		/* background-color: #ffffff; */
		box-sizing: border-box;

		.bgback {
			background-color: #2d2d2d;
		}

		.topiccon-box {
			width: 100%;
			// background-color: #ffffff;
			padding: 30rpx;

			.topicnum-clear {
				width: 100%;
				height: 60rpx;
				padding: 5rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;

				.topicnum {
					font-size: 35rpx;
					// font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 41rpx;
					color: #828282;

					.topicnum-blue {
						color: #0da0ff;
					}
				}

				.clear {
					width: 194rpx;
					height: 50rpx;
					background-color: #f0f0f0;
					font-size: 26rpx;
					// font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #828282;
					line-height: 50rpx;
					text-align: center;
					border-radius: 40rpx;
					padding: 3rpx 0rpx;
				}
			}

			.question-class {
				display: inline-block;
				// display: flex;
				text-align: justify !important;

				.question-class-text {
					width: 136rpx;
					height: 44rpx;
					background: #0da0ff;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					opacity: 1;
					font-size: 26rpx;
					// font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #ffffff;
					line-height: 42rpx;
					text-align: center;
					margin-right: 20rpx;
					display: inline-block;
				}

				.ku-question-class-text {
					height: 44rpx;
					background: #0da0ff;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					opacity: 1;
					font-size: 26rpx;
					// font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #ffffff;
					line-height: 44rpx;
					text-align: center;
					margin-left: 20rpx;
					display: inline-block;
					padding: 6rpx 20rpx;
				}
			}


			.collect-listen-read {
				width: 650rpx;
				height: 110rpx;
				margin: 0 auto;
				margin-top: 60rpx;
				display: flex;
				justify-content: space-between;
				direction: ltr;


				.collect {
					// width: 90rpx;
					// height: 90rpx;
					width: 33.33%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;

					.collect-img {
						width: 50rpx;
						height: 50rpx;
					}

					.collect-text {
						// font-size: 28rpx;
						// font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						// color: #2B2B2B;
						// line-height: 33rpx;
					}
				}
			}

			.answer-correction {
				width: 690rpx;
				height: 84rpx;
				background: #f6f6f6;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				opacity: 1;
				margin-top: 75rpx;
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;
				// margin-bottom: 30rpx;

				.answer {
					font-size: 30rpx;
					// font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #2b2b2b;
					display: flex;
					align-items: center;

					// line-height: 84rpx;
					.answer-blue {
						font-size: 36rpx;
						// font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #0da0ff;
					}
				}

				.correction {
					font-size: 24rpx;
					// font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #c2c2c2;
					line-height: 84rpx;
				}
			}

			.Problem-technique {
				width: 100%;
				// margin-top: 30rpx;
				// background-color: #ffffff;
				// padding: 30rpx;
				padding-top: 0;
				margin-top: 40rpx;

				.Problem-title {
					// font-size: 34rpx;
					// font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					// color: #2B2B2B;
					line-height: 40rpx;

					.shu {
						display: inline-block;
						width: 9rpx;
						height: 28rpx;
						background-color: #0da0ff;
						margin-right: 18rpx;
						border-radius: 10rpx;
					}
				}

				.technique {
					// font-size: 28rpx;
					// font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					// color: #2B2B2B;
					line-height: 46rpx;
					margin-top: 28rpx;
				}

				.viewvideo {
					width: 690rpx;
					height: 420rpx;
					// position: relative;
					margin-top: 31rpx;
				}

				.videoc {
					width: 687rpx;
					height: 387rpx;
					border-radius: 5px;
					overflow: hidden;
				}
			}
		}


	}

	.topictype {
		background: #1894f4;
		padding: 0rpx 10rpx;
		float: left;
	}

	.toppicplay {
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;
		margin-right: 15rpx;
		float: left;
	}

	.toppicplay image {
		width: 40rpx;
		height: 40rpx;
	}

	.topictext {
		padding: 2rpx 5rpx;
		float: left;
		display: block;
	}

	.kzlayout .topictype {
		float: right !important;
	}

	.kzlayout .toppicplay {
		float: right !important;
	}

	.uylayout .topictype {
		float: right !important;
	}

	.uylayout .toppicplay {
		float: right !important;
	}

	.clearfloat {
		clear: both;
		height: 0;
		font-size: 1px;
		line-height: 0px;
	}

	.poptitle {
		width: 750rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-indent: 30rpx;
	}

	.settingtitle {
		width: 700rpx;
		height: 80rpx;
		margin: 0 auto;
		border-bottom: solid 2rpx #dedfde;
	}

	.booter-bottom {
		border-bottom: solid 1rpx #e4e4e4;
		padding-bottom: 20rpx;
		box-sizing: border-box;
	}

	.setting-fontsize-text {
		width: 100%;
		// padding-left: 30rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		// font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #2b2b2b;
		// margin-left: 30rpx;
	}

	.setting-yx-text {
		font-size: 32rpx;
		// font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #2b2b2b;
		// line-height: 38rpx;
	}

	.setting-yx {
		width: 700rpx;
		margin-left: 25rpx;
		// padding: 0 30rpx;
	}

	.settingcon {
		width: 700rpx;
		margin: 30rpx auto;
		display: flex;
		justify-items: baseline;
		justify-content: space-between;
		align-items: center;

		.buttonsbox {
			display: flex;
			align-items: center;

			.settingfootbu {
				// width: 134rpx;
				height: 54rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				opacity: 1;
				border: 1rpx solid #DFDFDF;
				padding: 0 15rpx;
				line-height: 48rpx;
				text-align: center;
				font-size: 26rpx;
				font-weight: 400;
				position: relative;
			}

			.back {
				background-color: #696A7C;
				color: #fffff;
			}

			.bai {
				background-color: #DFDFDF;
				color: black;
			}

		}
	}

	.pt50 {
		padding-top: 50rpx;
	}

	.settingcontxt {
		width: 600rpx;
		height: 80rpx;
		display: inline-block;
	}

	.settingswith {
		width: 100rpx;
		height: 80rpx;
		display: inline-block;
	}

	.settingfoot {
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		text-align: center;
	}

	.settingfoottext {
		justify-items: left;
		padding: 0 15rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.settingfootbu {
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		text-align: center;
		justify-content: center;
	}

	.kz .settingfootbu text {
		line-height: 70rpx !important;
		height: 60rpx !important;
	}

	.uy .settingfootbu text {
		line-height: 70rpx !important;
		height: 60rpx !important;
	}

	.settingfootbu text {
		display: inline-block;
		line-height: 60rpx;
	}

	.settingfootbutext {
		display: inline-block;
		line-height: 60rpx;
	}

	.settingfootbu image {
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
		justify-content: center;
	}

	.white {
		background: #fcfdfc;
		color: #3c3d3c;
	}

	.black {
		background: #2d2d2d;
		color: #888888;
	}

	.fontsizes {
		width: 750rpx;
		height: 80rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-items: baseline;
	}

	.fontsizeleft {
		width: 80rpx;
		height: 80rpx;
		display: inline-block;
		line-height: 80rpx;
		text-align: center;
	}

	.fontsizebg {
		width: 535rpx;
		height: 34rpx;

		display: inline-block;
		background: url(../../static/images/fontsize.png) no-repeat;
		background-size: 100% auto;
		justify-content: center;
		margin-top: 0rpx;
	}

	.fontslider {
		margin-top: -7rpx;
		width: 100%;
		margin-left: 0rpx;
	}

	.settingimg {
		width: 40rpx;
		height: 40rpx;
	}

	.wrap {
		padding: 24rpx;
	}

	.navbar-right {
		margin-right: 24rpx;
		display: flex;
		align-items: flex-end;
		right: 10rpx;
		position: absolute;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		position: relative;
	}

	.right-item {
		margin: 0 12rpx;
		position: relative;
		color: #ffffff;
		display: flex;
	}

	.message-box {
		width: 40rpx;
		height: 40rpx;
	}

	/* 动画特效开始 */
	.tanchu {
		/* Chrome, Safari, Opera */
		-webkit-animation-name: moveit;
		-webkit-animation-duration: 0.5s;
		/* Standard syntax */
		animation-name: moveit;
		animation-duration: 0.5s;
		box-shadow: 0 5px 5px 1px #999;
		height: 100%;
	}

	.tanchuz {
		/* Chrome, Safari, Opera */
		-webkit-animation-name: moveitz;
		-webkit-animation-duration: 0.5s;
		/* Standard syntax */
		animation-name: moveitz;
		animation-duration: 0.5s;
		box-shadow: 0 5px 5px 1px #999;
		height: 100%;
	}

	/* Chrome, Safari, Opera */
	@-webkit-keyframes moveitz {
		from {
			left: 0;
		}

		to {
			left: -150%;
			opacity: 0;
		}
	}

	/* Standard syntax */
	@keyframes moveitz {
		from {
			left: 0;
		}

		to {
			left: -150%;
			opacity: 0;
		}
	}

	/* Chrome, Safari, Opera */
	@-webkit-keyframes moveit {
		from {
			left: 0;
		}

		to {
			left: 150%;
			opacity: 0;
		}
	}

	/* Standard syntax */
	@keyframes moveit {
		from {
			left: 0;
		}

		to {
			left: 150%;
			opacity: 0;
		}
	}

	/* 动画特效结束 */
	/* 隐形显示id */
	.viewid {
		color: #b3b3b3;
		font-size: 20rpx;
	}

	/* 隐形显示id结束 */


	.nav-sty {
		padding-left: 30rpx;
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
	}


	.imgpop {
		background-color: transparent;

		/deep/.u-mode-center-box {
			background-color: transparent;
		}
	}
</style>